<template>
  <div class="phase">
    <div class="phase-left">
      <dv-border-box3>
        <div class="phase-left-top">
          <div class="phase-left-top-chart">
            <LeftTopChart
              :dataReconfiguration="dataReconfiguration"
              :rouMin="rouMin"
            ></LeftTopChart>
          </div>
          <div class="phase-left-top-text">
            <h4>·算法综合考虑聚类中心指标γ</h4>
            <h4>·能够快速确定数据集中心数值</h4>
            <h4>·利用CFSFDP算法辅助判别户变关系</h4>
            <h4>·整体识别准确率保持在97.56%以上</h4>
            <h6 style="margin-top: 40px">x:电压曲线相对密度</h6>
            <h6>y:电压曲线相对距离</h6>
          </div>
        </div>
        <div class="phase-left-bottom">
          <div class="phase-left-bottom-chart">
            <LeftBottomChart
              :gammaReconfiguration="gammaReconfiguration"
              :gamma="gamma"
              :file_id_show="file_id_show"
            ></LeftBottomChart>
          </div>
          <div class="phase-left-bottom-text">
            <h4>·二维映射分析原始电压数据集</h4>
            <h4>·综合衡量电压曲线相似程度</h4>
            <h4>·选择实时最佳数据作为聚类中心</h4>
            <h4>·构建最佳聚类中心决策图</h4>
            <h6 style="margin-top: 40px">x:用户ID序列</h6>
            <h6>y:电压曲线相似度指标</h6>
          </div>
        </div>
      </dv-border-box3>
    </div>
    <div class="phase-right">
      <div class="phase-right-top">
        <el-input
          style="width: 100%"
          v-model="selectValue"
          placeholder="请输入要查找的户号"
        >
        </el-input>
        <dv-button
          style="width: 90px; height: 32px; margin-left: 20px"
          @click="btnClickSearch"
          border="Border3"
          color="#c8161d"
          font-color="#e18a3b"
        >
          查询
        </dv-button>
      </div>
      <div class="phase-right-bottom">
        <div style="margin: 20px 0 0 30px" v-if="smallLine.length > 0">
          户号:{{ selectValue }}的相位为: {{ desPhase }}, 电压曲线图如下
        </div>
        <div class="phase-right-bottom-line">
          <el-empty
            v-if="smallLine.length === 0"
            description="用户不存在"
          ></el-empty>

          <PhaseLine
            :smallLine="smallLine"
            :dict_unusualCopy="dict_unusualCopy"
            v-else
          ></PhaseLine>
        </div>

        <div class="phase-right-bottom-table">
          <el-table
            :data="tableData"
            :row-class-name="tableRowClassName"
            @row-click="btnClickRow"
            height="400"
          >
            <el-table-column type="index" width="50" />
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="phase" label="相位" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import PhaseLine from "./PhaseLine";
import LeftTopChart from "./LeftTopChart";
import LeftBottomChart from "./LeftBottomChart";
import { postPhase } from "@/api/api";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const selectValue = ref("");
const tableRowClassName = (rowIndex) => {
  if (rowIndex.rowIndex % 2 != 0) {
    console.log("rowIndex", rowIndex.rowIndex);
    return "evenRow";
  }
  return "oddRow";
};
const tableData = ref([]);

const file_id_show = ref([
  3011003007, 3011003013, 3011018035, 3011018036, 3011018037, 3011018038,
  3011018039, 3011018040, 3011018041, 3011018042, 3011018043, 3011018044,
  3011018068, 3011018419, 3011018420,
]);
let rou = ref([
  12.0, 13.0, 11.0, 12.0, 9.0, 8.0, 11.0, 12.0, 11.0, 8.0, 13.0, 12.0, 7.0, 7.0,
  9.0,
]);
let rouMin = ref(0);
let relative_distance = ref([
  2.525866188063023, 6.042350536008306, 1.9209372712298416, 2.5709920264364796,
  1.6583123951777274, 1.606237840420914, 2.289104628451926, 2.2158519806160246,
  1.6340134638367907, 1.4000000000000057, 4.209513035969841, 2.355843797877965,
  2.9410882339705515, 2.061552812808822, 3.3896902513356504,
]);
let dataReconfiguration = ref([]);
dataReconfiguration.value = rou.value.map((item, index) => [
  item,
  relative_distance.value[index],
]);
rouMin.value = Math.min(...rou.value);

console.log(dataReconfiguration.value, "dataReconfiguration");
const gamma = ref([
  30.310394256756275, 78.55055696810798, 21.130309983528257, 30.851904317237754,
  14.924811556599547, 12.849902723367313, 25.180150912971186,
  26.590223767392295, 17.974148102204698, 11.200000000000045, 54.72366946760793,
  28.270125574535584, 20.587617637793862, 14.430869689661753,
  30.507212262020854,
]);
const gammaReconfiguration = ref([]);
gamma.value.sort((a, z) => {
  return z - a;
});
gammaReconfiguration.value = file_id_show.value.map((item, index) => [
  index + 1,
  gamma.value[index],
]);
const dict_all = ref({
  3011003007: "void",
  3011003013: "void",
  3011018068: "void",
  3011018419: "void",
  3011018420: "void",
  3011018035: "A",
  3011018036: "A",
  3011018037: "C",
  3011018038: "C",
  3011018039: "C",
  3011018040: "C",
  3011018041: "B",
  3011018042: "C",
  3011018043: "C",
  3011018044: "C",
});
const data_volt_show = ref([
  [
    240.4, 240.8, 239.5, 240.0, 240.4, 241.8, 240.2, 239.2, 237.4, 238.9, 237.5,
    236.7, 238.8, 237.6, 238.3, 238.6, 237.0, 237.7, 238.2, 237.6, 236.3, 238.5,
    237.4, 237.1, 236.8, 237.9, 238.9, 239.2, 239.0, 240.1, 240.4,
  ],
  [
    240.6, 240.7, 239.4, 240.2, 240.2, 241.6, 240.6, 239.7, 236.5, 238.4, 237.4,
    237.4, 238.5, 237.2, 238.3, 239.2, 237.6, 237.8, 237.9, 237.0, 236.8, 238.2,
    237.1, 237.3, 237.5, 238.5, 238.8, 238.1, 239.4, 240.2, 240.1,
  ],
  [
    240.6, 240.6, 240.1, 240.0, 240.2, 241.6, 240.3, 239.2, 238.0, 238.1, 238.2,
    237.8, 238.5, 237.9, 238.5, 239.0, 237.1, 238.2, 238.5, 237.8, 237.0, 238.1,
    237.9, 237.6, 237.6, 239.0, 238.8, 238.6, 238.8, 240.4, 240.9,
  ],
  [
    240.7, 240.7, 240.2, 240.3, 240.4, 241.7, 240.4, 239.7, 237.4, 239.1, 238.5,
    237.3, 237.6, 237.6, 237.7, 239.2, 237.5, 238.2, 238.5, 238.3, 237.2, 238.1,
    237.7, 237.9, 237.4, 239.2, 239.0, 238.9, 239.5, 240.7, 240.6,
  ],
  [
    240.5, 241.0, 240.0, 240.0, 240.3, 241.6, 240.2, 239.2, 238.2, 238.0, 238.1,
    237.6, 238.5, 238.0, 238.0, 239.0, 237.1, 238.4, 238.4, 237.8, 236.9, 238.4,
    237.9, 237.5, 237.5, 238.7, 239.0, 238.6, 239.2, 240.4, 240.6,
  ],
  [
    240.5, 240.9, 240.1, 240.1, 240.4, 241.6, 240.5, 238.5, 238.2, 238.1, 238.0,
    237.8, 238.9, 237.5, 238.2, 238.6, 237.0, 238.5, 238.3, 237.9, 236.5, 238.5,
    238.0, 237.4, 237.5, 239.0, 239.0, 238.7, 238.9, 240.2, 240.6,
  ],
  [
    240.7, 241.0, 240.2, 240.2, 240.5, 241.8, 240.8, 239.4, 238.2, 238.4, 238.2,
    237.8, 239.3, 238.0, 238.3, 238.6, 237.1, 238.4, 238.5, 238.0, 236.6, 238.7,
    238.4, 237.5, 237.8, 239.1, 239.3, 238.9, 239.5, 240.5, 240.8,
  ],
  [
    240.7, 241.0, 240.3, 240.2, 240.6, 241.8, 240.5, 239.6, 238.0, 238.7, 238.7,
    238.0, 238.6, 237.8, 237.8, 238.4, 237.6, 238.3, 238.6, 238.3, 237.4, 238.2,
    238.0, 237.7, 237.5, 239.2, 239.2, 239.1, 239.3, 240.7, 240.8,
  ],
  [
    240.4, 240.7, 240.1, 239.9, 240.3, 241.5, 240.3, 239.4, 237.9, 238.3, 238.4,
    237.7, 238.4, 237.9, 238.2, 239.0, 237.3, 238.0, 238.3, 238.0, 236.9, 237.9,
    238.0, 237.6, 237.6, 239.0, 238.9, 238.7, 239.1, 240.5, 240.5,
  ],
  [
    240.5, 240.8, 240.0, 240.0, 240.4, 241.6, 240.5, 239.2, 238.1, 238.2, 237.9,
    237.7, 239.0, 237.8, 238.2, 238.2, 237.0, 238.3, 238.4, 237.5, 236.4, 238.4,
    237.9, 237.3, 237.4, 239.0, 239.1, 238.6, 239.2, 240.3, 240.6,
  ],
  [
    240.3, 240.5, 239.9, 239.8, 240.2, 241.4, 240.3, 239.1, 238.0, 238.2, 238.3,
    237.6, 238.5, 237.7, 238.2, 238.2, 237.1, 237.9, 238.2, 237.9, 236.7, 237.8,
    237.8, 237.5, 237.6, 238.9, 238.6, 238.6, 238.7, 240.3, 240.5,
  ],
  [
    240.6, 240.4, 240.0, 240.0, 240.3, 241.5, 240.4, 239.5, 237.7, 239.0, 238.0,
    237.8, 237.3, 237.4, 237.7, 239.3, 237.4, 238.3, 238.6, 238.1, 237.2, 237.7,
    238.0, 237.6, 237.5, 239.0, 238.8, 238.7, 239.4, 240.3, 240.3,
  ],
  [
    241.3, 241.4, 240.7, 240.5, 241.0, 241.8, 241.3, 240.4, 238.5, 239.5, 239.2,
    238.0, 239.3, 238.4, 238.3, 239.1, 237.8, 238.8, 238.6, 238.2, 237.2, 238.7,
    238.4, 237.6, 237.5, 238.3, 238.0, 239.2, 240.1, 240.9, 240.7,
  ],
  [
    240.0, 240.7, 239.8, 240.0, 239.9, 241.3, 240.1, 237.8, 237.5, 238.6, 238.2,
    237.2, 238.0, 236.3, 237.9, 238.7, 236.8, 237.0, 237.8, 237.4, 236.3, 237.7,
    237.6, 237.4, 237.2, 237.8, 238.3, 237.1, 237.6, 240.2, 240.2,
  ],
  [
    240.2, 240.7, 239.8, 240.3, 240.2, 241.5, 240.3, 237.9, 236.8, 238.9, 238.1,
    237.6, 237.1, 236.4, 237.5, 238.9, 237.0, 237.9, 238.2, 237.7, 236.8, 237.4,
    237.8, 237.4, 236.9, 238.5, 238.3, 237.4, 237.7, 240.3, 240.2,
  ],
]);
const smallLine = ref([]);
const dict_unusualCopy = ref([]);
const desPhase = ref("");
// 表格数据重构
tableData.value = [];
for (const key in dict_all.value) {
  if (dict_all.value[key] !== "void") {
    tableData.value.push({
      id: key,
      phase: dict_all.value[key] + "相",
    });
  } else if (dict_all.value[key] === "void") {
    tableData.value.push({
      id: key,
      phase: "异常",
    });
  }
}
const initChart = async () => {
  const res = await postPhase({ file_name: route.query.file_name });
  dict_all.value = res.results[0].dict_all;
  data_volt_show.value = res.results[0].data_volt_show;
  // 左上图
  rou.value = res.results[0].rou;
  relative_distance.value = res.results[0].relative_distance;
  dataReconfiguration.value = rou.value.map((item, index) => [
    item,
    relative_distance.value[index],
  ]);
  res.results[0].file_id_show.map((item, index) => {
    file_id_show.value.push(index + 1);
  });

  gamma.value = res.results[0].gamma;
  gamma.value.sort((a, z) => {
    return z - a;
  });
  gammaReconfiguration.value = file_id_show.value.map((item, index) => [
    index + 1,
    gamma.value[index],
  ]);
  // 表格数据重构
  tableData.value = [];
  for (const key in dict_all.value) {
    if (dict_all.value[key] !== "void") {
      tableData.value.push({
        id: key,
        phase: dict_all.value[key] + "相",
      });
    }
  }
};
const btnClickSearch = () => {
  dict_unusualCopy.value = [];
  smallLine.value = [];
  file_id_show.value.map((item, index) => {
    dict_unusualCopy.value.push(index + 1);
    if (item === Number(selectValue.value)) {
      smallLine.value = data_volt_show.value[index];
    }
  });
  // 去除相位的value
  for (const key in dict_all.value) {
    if (selectValue.value === key) {
      if (dict_all.value[key] === "void") {
        desPhase.value = "异常";
      } else {
        desPhase.value = dict_all.value[key] + "相";
      }
    }
  }
};
const btnClickRow = (val) => {
  console.log(val.id);
  selectValue.value = val.id;
  btnClickSearch();
};
onMounted(() => {
  initChart();
});
</script>
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.evenRow {
  background: rgb(245, 245, 245) !important;
}
.oddRow {
  background: rgb(251, 255, 242) !important;
}
</style>
<style lang="scss" scoped>
.phase {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  .evenRow {
    background: rgb(245, 245, 245) !important;
  }
  .oddRow {
    background: rgb(251, 255, 242) !important;
  }
  opacity: 0.8;
  .phase-left {
    width: 60%;
    height: 100%;
    background: #081736;
    .phase-left-top {
      padding: 28px;
      display: flex;
      width: 100%;
      height: 50%;
      box-sizing: border-box;
      .phase-left-top-chart {
        width: 50%;
        height: 100%;
        border: 1px dashed white;
      }
      .phase-left-top-text {
        width: 50%;
        height: 100%;
        border: 1px dashed white;
        font-size: 26px;
        font-weight: bold;
        padding: 24px;

        h4 {
          margin: 18px 0;
        }
      }
    }
    .phase-left-bottom {
      padding: 28px;
      display: flex;
      width: 100%;
      height: 50%;
      box-sizing: border-box;
      padding-top: 0;
      .phase-left-bottom-chart {
        width: 50%;
        height: 100%;
        border: 1px dashed white;
      }
      .phase-left-bottom-text {
        width: 50%;
        height: 100%;
        border: 1px dashed white;
        font-size: 26px;
        font-weight: bold;
        padding: 24px;
        h4 {
          margin: 18px 0;
        }
      }
    }
  }
  .phase-right {
    width: 33%;
    height: 100%;

    .phase-right-top {
      width: 100%;
      // height: 10%;
      // padding: 24px;
      display: flex;
    }
    .phase-right-bottom {
      width: 100%;
      height: 90%;
      .phase-right-bottom-line {
        height: 50%;
      }
      .phase-right-bottom-table {
        margin-left: 20px;
        height: 50%;
        width: 100%;
      }
    }
  }
}
</style>
